<template>
  <div class="wrapper" ref="box">
    <div v-if="num === 1">{{num}}2222</div>
    <div v-else>
       <son ref="son" @aa="bb"/>
    </div>
    <button @click="change">点击</button>
    <button @click="change1">销毁</button>
  </div>
</template>

<script>
import Son from './Son'
export default {
  components: {
    Son
  },
  props: {},
  data () {
    return {
      num: 1
    }
  },
  beforeCreate () {
    console.log('--------------------------------父beforeCreate------------------什么都访问不了')
    console.log('父创造前钩子--自身元素', this.$refs.box) // 不能访问---undefined
    console.log('父创造前钩子--data数据', this.num)// 不能访问---undefined
    console.log('父创造前钩子--method方法', this.change)// 不能访问---undefined
    console.log('父创造前钩子--computed计算属性', this.newNum)// 不能访问---undefined
  },
  created () {
    console.log('---------------------------------父created---------------------可以访问data、方法、计算属性，不能访问dom元素')
    console.log('父创造后钩子--自身元素', this.$refs.box)// 不能访问---undefined
    console.log('父创造后钩子--data数据', this.num)// 能访问---1
    console.log('父创造后钩子--method方法', this.change)// 能访问---fn
    console.log('父创造后钩子--computed计算属性', this.newNum)//  能访问---2
  },
  beforeMount () {
    console.log('---------------------------------父beforeMount------------------可以访问data、方法、计算属性，不能访问dom元素---')
    console.log('父挂载前钩子--自身元素', this.$refs.box)// 不能访问---undefined
    console.log('父挂载前钩子--data数据', this.num)//  能访问 ---1
    console.log('父挂载前钩子--method方法', this.change)// 能访问---fn
    console.log('父挂载前钩子--computed计算属性', this.newNum)//  能访问---2
  },
  mounted () {
    console.log('---------------------------------父mounted----------------------什么都可以访问---------------------------------')
    console.log('父挂载后钩子--自身元素', this.$refs.box)// 能访问---dom
    console.log('父挂载后钩子--data数据', this.num)//  能访问 ---1
    console.log('父挂载后钩子--method方法', this.change)// 能访问---fn
    console.log('父挂载后钩子--computed计算属性', this.newNum)//  能访问---2
  },
  beforeUpdate () {
    console.log('---------------------------------父beforeUpdate------------------父组件中所有都能访问，但访问不了字组件中的元素------------')
    console.log('父更新前钩子--自身元素', this.$refs.box)// 能访问---dom
    console.log('父更新前钩子--data数据', this.num)//  能访问 ---1
    console.log('父更新前钩子--method方法', this.change)// 能访问---fn
    console.log('父更新前钩子--computed计算属性', this.newNum)//  能访问---2
    console.log('父更新前钩子--子组件元素', this.$refs.son)//  不能访问---undefined
  },
  updated () {
    console.log('----------------------------------父updated-----------------------父组件中所有都能访问，也可以访问子组件的元素-----------------')
    console.log('父更新后钩子--子组件元素', this.$refs.son)
    console.log('父更新后钩子--子组件元素', this.$refs)
  },
  beforeDestroy () {
    console.log('----------------------------------父beforeDestroy------------------------------------------------')
  },
  destroyed () {
    console.log('----------------------------------父destroyed ---------------------------------------------------')
  },
  activated () {},
  methods: {
    change () {
      this.num = 2
    },
    change1 () {
      this.num = 1
    },
    // 子组件传递的参数
    bb (data) {
      console.log('data11', data)
    }
  },
  computed: {
    // eslint-disable-next-line vue/no-dupe-keys
    newNum (value) {
      return this.num + 1
    }
  },
  watch: {}
}
</script>
